<template>
  <div>
    <div class="icon_box">
      <!-- el-icon-s-unfold -->
      <i
        :class="isCollapse === true ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
        @click="handleCollapse"
      ></i>
    </div>
    <el-menu
      :unique-opened="true"
      router
      :default-active="$route.path"
      background-color="#333744"
      text-color="#fff"
      active-text-color="rgb(64,158,255)"
      :collapse="isCollapse"
      :collapse-transition="false"
    >
      <!-- 一级导航 -->
      <el-submenu v-for="item in menuList" :key="item.id" :index="'' + item.id">
        <template slot="title">
          <i :class="iconObj[item.id]"></i>
          <span>{{ item.authName }}</span>
        </template>
        <!-- 二级导航 -->
        <el-menu-item
          v-for="item2 in item.children"
          :key="item2.id"
          :index="'/' + item2.path"
        >
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{ item2.authName }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getMenuApi } from '../../../api/index';

export default {
  data() {
    return {
      menuList: [],
      iconObj: {
        125: 'el-icon-user',
        103: 'el-icon-picture-outline-round',
        101: 'el-icon-s-home',
        102: 'el-icon-s-data',
        145: 'el-icon-document-remove',
      },
      isCollapse: false,
    };
  },
  created() {
    this.getMenuList();
  },
  methods: {
    // 获取左侧导航栏
    async getMenuList() {
      const res = await getMenuApi();
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.menuList = res.data;
    },
    // 折叠菜单栏
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.$emit('getAsideWidth', this.isCollapse);
    },
  },
};
</script>

<style lang='less' scoped>
.el-menu {
  border-right: none;
}
/deep/ .el-submenu__title {
  font-size: 12px;
}
/deep/ .el-menu-item span {
   font-size: 12px;
}
.icon_box {
  width: 100%;
  height: 30px;
  background: #4a5064;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-icon-s-fold,
.el-icon-s-unfold {
  cursor: pointer;
}
</style>
